<template>
  <div>
  <form-box headText="报价单明细" v-if="quoteId">
    <el-button
      slot="btn"
      size="small"
      @click.native="showAddQuoteLineBox">增加明细</el-button>

    <el-collapse v-model="lineList" @change="handleLineChange" accordion>
      <el-collapse-item v-for="(item, index) in quoteLineList_child"
                        :key="index"
                        :title="item.cst_mold_no"
                        :name="index"
                        @click.native="" >
        <el-form label-width="100px" inline>
          <el-form-item label="数量" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.count"></el-input>
          </el-form-item>

          <el-form-item label="客户模号" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.cst_mold_no"></el-input>
          </el-form-item>

          <el-form-item label="高" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.height"></el-input>
          </el-form-item>

          <el-form-item label="长" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.length"></el-input>
          </el-form-item>

          <el-form-item label="宽" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.width"></el-input>
          </el-form-item>

          <el-form-item label="重量" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.weight"></el-input>
          </el-form-item>

          <el-form-item label="制品材料" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.material"></el-input>
          </el-form-item>

          <el-form-item label="内模材料" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.mold_mat"></el-input>
          </el-form-item>

          <el-form-item label="总价" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.price"></el-input>
          </el-form-item>

          <el-form-item label="单价" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.up"></el-input>
          </el-form-item>

          <el-form-item label="折扣" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.rebate"></el-input>
          </el-form-item>

          <el-form-item label="折扣金额" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.rebate_price"></el-input>
          </el-form-item>

          <el-form-item label="工期" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.task_time"></el-input>
          </el-form-item>

          <el-form-item label="类型名称" label-width="100px">
            <el-input :disabled="!isEdit_line" v-model="item.type_name"></el-input>
          </el-form-item>

          <el-form-item label="类型" label-width="100px">
            <el-select :disabled="!isEdit_line" v-model="item.type" clearable placeholder="产品类型">
              <el-option
                v-for="item in options_quote_line_type"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="水口形式" label-width="100px">
            <el-select :disabled="!isEdit_line" v-model="item.water_type" clearable placeholder="水口形式">
              <el-option
                v-for="item in options_quote_line_water_type"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="顶出方式" label-width="100px">
            <el-select :disabled="!isEdit_line" v-model="item.out_way" clearable placeholder="顶出方式">
              <el-option
                v-for="item in options_quote_line_out_way"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="流道形式" label-width="100px">
            <el-select :disabled="!isEdit_line" v-model="item.runner" clearable placeholder="流道形式">
              <el-option
                v-for="item in options_quote_line_runner"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <br/>
          <el-form-item label="备注" label-width="100px" style="display: inline-block;width: 100%">
            <el-input
              :disabled="!isEdit_line"
              type="textarea"
              :rows="3"
              autosize
              :maxlength="500"></el-input>
          </el-form-item>
          <br/>
          <el-form-item label="是否开启编辑" style="float: right" label-width="100px">
            <el-switch
              v-model="isEdit_line"
              on-color="#13ce66"
              off-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-button type="success" style="margin-bottom: 10px" @click.native="saveQuoteLine(index)">
            保存行头信息
          </el-button>
          <el-button type="danger" style="margin-bottom: 10px" @click.native="delQuoteLine(index)">
            删除行信息
          </el-button>
        </el-form>

        <span class="hr-text">制品信息</span>
        <el-button size="small" @click.native="addLineProduct">增加</el-button>
        <hr class="hr-color"/>

        <el-table :data="reqLineProductsData.prod_Info"
                  border fit highlight-current-row style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column align="center" label="制品编号" max-width="20%">
            <template scope="scope">
              <span v-show="!changeProductEdit">{{scope.row.cst_prod_no}}</span>
              <el-input v-show="changeProductEdit" v-model="scope.row.cst_prod_no"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="制品名称" max-width="20%">
            <template scope="scope">
              <span v-show="!changeProductEdit">{{scope.row.cst_prod_name}}</span>
              <el-input v-show="changeProductEdit" v-model="scope.row.cst_prod_name"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="腔数" max-width="20%">
            <template scope="scope">
              <span v-show="!changeProductEdit">{{scope.row.cavity_total}}</span>
              <el-input v-show="changeProductEdit" v-model="scope.row.cavity_total"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="模型" max-width="20%">
            <!--<template scope="scope">
              <el-upload
                action="上传地址"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">单个文件大小不超过5MB</div>
              </el-upload>
              &lt;!&ndash;<span v-show="!changeProductEdit">{{scope.row.prod_model_pic.name}}/{{scope.row.prod_model_pic.url}}</span>
              <el-input v-show="changeProductEdit" v-model="scope.row.prod_model_pic.name"></el-input>&ndash;&gt;
            </template>-->
          </el-table-column>
          <el-table-column align="center" label="操作" max-width="20%">
            <template scope="scope">
              <el-button :type="changeProductEdit?'success':'primary'"
                         size="small"
                         @click.native='saveLineProduct(item.quote_line_id,index)'
                         icon="edit">{{changeProductEdit?'保存':'编辑'}}</el-button>
              <el-button
                size="small"
                type="danger"
                @click="delLineProduct(scope.row.prod_id,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-collapse-item>
    </el-collapse>
  </form-box>

  <el-dialog v-if="quoteId" title="增加报价单明细" :visible.sync="isShowAddQuoteLine" size="large" top="5%">
    <el-form class="small-space" :model="reqQuoteLineData" label-position="right" label-width="90px" :inline="true">

      <el-form-item label="数量" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.count"></el-input>
      </el-form-item>

      <el-form-item label="客户模号" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.cst_mold_no"></el-input>
      </el-form-item>

      <el-form-item label="高" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.height"></el-input>
      </el-form-item>

      <el-form-item label="长" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.length"></el-input>
      </el-form-item>

      <el-form-item label="宽" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.width"></el-input>
      </el-form-item>

      <el-form-item label="重量" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.weight"></el-input>
      </el-form-item>

      <el-form-item label="制品材料" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.material"></el-input>
      </el-form-item>

      <el-form-item label="内模材料" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.mold_mat"></el-input>
      </el-form-item>

      <el-form-item label="总价" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.price"></el-input>
      </el-form-item>

      <el-form-item label="单价" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.up"></el-input>
      </el-form-item>

      <el-form-item label="折扣" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.rebate"></el-input>
      </el-form-item>

      <el-form-item label="折扣金额" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.rebate_price"></el-input>
      </el-form-item>

      <el-form-item label="工期" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.task_time"></el-input>
      </el-form-item>

      <el-form-item label="类型名称" label-width="100px">
        <el-input v-model="reqQuoteLineData.quote_line.type_name"></el-input>
      </el-form-item>

      <el-form-item label="顶出方式" label-width="100px">
        <el-select v-model="reqQuoteLineData.quote_line.out_way" clearable placeholder="顶出方式">
          <el-option
            v-for="item in options_quote_line_out_way"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="流道形式" label-width="100px">
        <el-select v-model="reqQuoteLineData.quote_line.runner" clearable placeholder="流道形式">
          <el-option
            v-for="item in options_quote_line_runner"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="类型" label-width="100px">
        <el-select v-model="reqQuoteLineData.quote_line.type" clearable placeholder="产品类型">
          <el-option
            v-for="item in options_quote_line_type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="水口形式" label-width="100px">
        <el-select v-model="reqQuoteLineData.quote_line.water_type" clearable placeholder="水口形式">
          <el-option
            v-for="item in options_quote_line_water_type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShowAddQuoteLine = false">取 消</el-button>
      <el-button type="primary" @click="confirmAddQuoteLine">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<script>
  import formBox from '../../../../components/formBox'
  import {
    quoteLineList,
    quoteLineInfo,
    prodModifyQuote,
    modifyQuoteLine,
    deleteQuoteLineProd,
    deleteQuoteLine,
  } from  '@/api/cstOrder/quote'

  export default {
    name:'quoteDetail',
    components:{
      formBox
    },
    data(){
      return {
        isShowAddQuoteLine:false,
        isEdit_line:false,
        changeProductEdit:false,
        lineList:'',
        quoteLineList_child:[],
        reqQuoteLineData:{
          client_type:1,
          quote_id:null,
          quote_line:{
            count:null,
            cst_mold_no:null,
            height:null,
            length:null,
            material:null,
            mold_mat:null,
            out_way:null,
            quote_line_id:null,
            price:null,
            up:null,
            rebate:null,
            rebate_price:null,
            runner:null,
            task_time:null,
            type:null,
            type_name:null,
            water_type:null,
            weight:null,
            width:null
          }
        },
        reqLineProductsData:{
          clien_type:1,
          quote_line_id:'',
          prod_Info:[]
        },
        options_quote_line_type: [
          {
            value: '1',
            label: '模具'
          },
          {
            value: '2',
            label: '手板'
          },
          {
            value: '3',
            label: '加工件'
          },
          {
            value: '4',
            label: '注塑件'
          }
        ],
        options_quote_line_runner: [
          {
            value: '1',
            label: '冷流道'
          },
          {
            value: '2',
            label: '热流道'
          },
          {
            value: '3',
            label: '其它'
          }
        ],
        options_quote_line_out_way: [
          {
            value: '1',
            label: '液压缸'
          },
          {
            value: '2',
            label: '气压缸'
          },
          {
            value: '3',
            label: '其它'
          }
        ],
        options_quote_line_water_type: [
          {
            value: '1',
            label: '侧水口'
          },
          {
            value: '2',
            label: '点水口'
          },
          {
            value: '3',
            label: '其它'
          }
        ],
      }
    },
    props:[
      'quoteId',
      'quoteLineList'
    ],
    mounted(){
      let quote_id = this.$route.query.quote_id
      if(quote_id) {//如果router里quote_id存在则本页面就是编辑状态,需要查询出quote_id对应的报价单信息
        let req = {
          client_type:1,
          quote_id:quote_id
        }
        quoteLineList(req)   //获取头信息成功后则获取明细行信息
          .then(res => {
            this.quoteLineList_child = res.quote_line_list
            this.$emit('fetchQLList',res.quote_line_list)
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    watch: {
      // 如果 `quoteLineList` 发生改变，这个函数就会运行
      quoteLineList: function (newVal) {
        this.quoteLineList_child = newVal
      }
    },
    methods:{
      handleLineChange(val){  //当打开的折叠面板发生改变时调用获取行明细接口
        if(val !== ''){
          let req_lineInfo = {
            client_type:1,
            quote_line_id:this.quoteLineList_child[val].quote_line_id
          }

          quoteLineInfo(req_lineInfo)
            .then(res => {
              this.quoteLineList_child[val] = res
              this.reqLineProductsData.prod_Info = res.prod_list
            })
            .catch(err => {
              console.log(err)
            })
        }
      },
      showAddQuoteLineBox(){  //显示添加行信息弹窗
        let reset_quote_line = {
          count:null,
          cst_mold_no:null,
          height:null,
          length:null,
          material:null,
          mold_mat:null,
          out_way:null,
          quote_line_id:null,
          price:null,
          up:null,
          rebate:null,
          rebate_price:null,
          runner:null,
          task_time:null,
          type:null,
          type_name:null,
          water_type:null,
          weight:null,
          width:null
        }
        this.reqQuoteLineData.quote_line = reset_quote_line
        this.isShowAddQuoteLine = true
      },
      confirmAddQuoteLine(){  //弹窗填写数据后点击确认增加一条报价单明细(行信息)
        this.reqQuoteLineData.quote_id = this.quoteId;
        modifyQuoteLine(this.reqQuoteLineData)  //调用增加行信息的接口
          .then(res => {
            this.reqQuoteLineData.quote_line.quote_line_id = res.quote_line.quote_line_id
            this.quoteLineList_child.push(this.reqQuoteLineData.quote_line)
            this.isShowAddQuoteLine = false
            this.$message({
              type: 'success',
              message: '保存行信息成功,您可以继续添加制品信息或关闭页面'
            });
          })
          .catch(err => {
            console.log(err)
            this.$message.error('添加失败!')
          })
      },
      saveQuoteLine(index){  //折叠框中修改行信息
        this.reqQuoteLineData.quote_line = this.quoteLineList_child[index]
        modifyQuoteLine(this.reqQuoteLineData)  //调用增加行信息的接口
          .then(res => {
            this.$message({
              type: 'success',
              message: '修改行信息成功,您可以继续添加制品信息或关闭页面'
            });
          })
          .catch(err => {
            console.log(err)
            this.$message.error('修改失败!')
          })
      },
      delQuoteLine(index){ //删除行信息
        this.$confirm('此操作将删除当前行信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.quoteLineList_child[index].quote_line_id){
            let req_delLine = {
              client_type:1,
              quote_line_id:this.quoteLineList_child[index].quote_line_id
            }
            deleteQuoteLine(req_delLine)
              .then(res => {
                this.quoteLineList_child.splice(index,1)
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              })
              .catch(err => {
                console.log(err)
                this.$message.error('删除失败')
              })

          }else{
            this.quoteLineList_child.splice(index,1)
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addLineProduct(){ //新增一行制品明细
        this.changeProductEdit = true
        let product = {
          cavity_total:'请填写',
          cst_prod_no:'请填写',
          cst_prod_name:'请填写'/*,
          prod_model_pic:{
            name:'请填写',
            url:'请填写'
          },*/
        }
        this.reqLineProductsData.prod_Info.push(product)
      },
      saveLineProduct(lineId,lineIndex){  //保存行 制品明细
        if(this.changeProductEdit){
          this.changeProductEdit = false
          this.reqLineProductsData.quote_line_id = lineId
          prodModifyQuote(this.reqLineProductsData) //调用接口保存当前行信息的 制品明细
            .then(res => {
              this.$message({
                type: 'success',
                message: '保存制品信息成功,您可以继续添加或关闭页面'
              });
              let req_lineInfo = {
                client_type:1,
                quote_line_id:lineId
              }
              quoteLineInfo(req_lineInfo) //保存当前行信息的制品明细成功之后 再调用获取行信息明细的方法取一下数据
                .then(res => {
                  this.quoteLineList_child[lineIndex] = res
                  this.reqLineProductsData.prod_Info = res.prod_list
                })
                .catch(err => {
                  console.log(err)
                })
            })
            .catch(err => {
              console.log(err)
            })
        }else{
          this.changeProductEdit = true
        }
      },
      delLineProduct(proId,index){  //删除行 制品明细
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(proId){  //如果制品id存在则调用接口删除,否则就只删除本地变量里的值
            let req_delPro = {
              client_type:1,
              prod_id:proId
            }
            deleteQuoteLineProd(req_delPro)
              .then(res => {
                this.reqLineProductsData.prod_Info.splice(index,1)
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              })
              .catch(err => {
                console.log(err)
                this.$message.error('删除失败')
              })
          }else{
            this.reqLineProductsData.prod_Info.splice(index,1)
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });

        });
      },
    }
  }
</script>
<style scoped lang="scss">
  .hr-text{
    color: #BFBFBF;
  }
  .hr-color{
    color: #e0e0e0;
    background-color: #e0e0e0;
    /*height: 0.5px;*/
    border: 0.5px solid #e0e0e0;
  }
</style>
